<template>
<div>
<table style="width: 100%;border: black 1px solid">
      <tr style="height: 100%">
        <td style="width: 70%">
          提交人：{{tjr}}<br>{{pzr}}
          批准人： <a-checkbox v-for="(i,index) in user" :key="i.id" :disabled="i.yxz" v-if="i.id!=l_id" v-model="i.value" @change="onChangess(i.id, index, i.value)">{{i.username}}</a-checkbox>
          <p>{{now_xz}}</p>
          <p>{{Approved_list}}</p>
          <button @click="bingshen">并审</button><button @click="chuanshen">串审</button>
          <p v-for="(j,k,index) in mbs" :key="index">
          <span v-if="j=='text'">{{ k }}：<input type="text" v-model="mb[k]"></span>
          <span v-if="j=='date'">{{ k }}：<a-date-picker @change="onChange => xz(onChange,k)"/></span>
          </p>
        </td>
        <td>
          <p style="text-align: center;"><input type="file" @change="upload_qiniu"></p>
          <p v-if="img_url" style="text-align: center;"><img :src="img_url" alt="" style="width: 200px; height: 200px; border-radius:50%;"></p>
        </td>
      </tr>
</table>

 <a-button type="dashed" @click="tj">提交</a-button>
  </div>
</template>

<script>
import moment from 'moment';
import 'moment/locale/zh-cn';

export default {
  data() {
    return {
      img_url: '',
      // 七牛去上传凭证
      uptoken: '',
      data: [],
      all:'',
      mb: '',
      mbs: '',
      pid: this.$route.query.pid,
      pzr:[],
      tjr:sessionStorage.getItem('username'),
      user:[],
      username:'',
      now_xz: [],
      Approved_list: [],
      l_id:sessionStorage.getItem('uid')
    }
  },
  methods: {
    // 获取uptoken
    get_uptoken() {
        this.$axios.get('uptoken/').then(res=>{
            this.uptoken = res.data.token
        })
    },
    // 七牛云上传
    upload_qiniu(e) {
        // 获取文件对象
        let file = e.target.files[0]
        // 声明参数
        let form_data = new FormData()
        // 将上传凭证添加参数
        form_data.append('token', this.uptoken)
        // 添加图片
        form_data.append('file', file)
        // 定制化axios  不携带cookie上传
        const axios_qiniu = this.$axios.create({withCredentials:false})
        // 发送请求
        axios_qiniu({
            method: 'post',
            url: 'http://up-z1.qiniu.com/',
            data: form_data,
            tiemout: 30000,

        }).then(res=>{
            console.log(res)
            this.img_url = 'http://qq5jf6dzd.hb-bkt.clouddn.com/' + res.data.key
        })
    },
    onChange(data, string){
      console.log(data, string)
    },
    xz(date,k){
      this.mb[k] = date._d
    }
    ,
    qq(){
      this.$axios.get('http://127.0.0.1:8000/qingjia/?pid='+this.$route.query.pid)
      .then(resp=>{
        console.log(resp.data);
        this.mb = resp.data.mb
        this.mbs = resp.data.mbs
      })
    },
    tj(){
       console.log(this.Approved_list)
      var data = new FormData()
      data.append('qiniuimg', this.img_url)
      data.append('uid', sessionStorage.getItem('uid'))
      data.append('Approved_list', JSON.stringify(this.Approved_list))
      data.append('info', JSON.stringify(this.mb))
      this.$axios.post('http://127.0.0.1:8000/qingjia/?pid='+this.pid,data).then(resp=>{
        console.log(resp.data.data)
      })

    },
    getuser(){
      this.$axios.get('select/').then(res=>{
         this.user = res.data
         console.log(res.data);
         
      })
    },
     onChangess(e, index, value) {
      if(this.now_xz.indexOf(e)==-1){
        this.now_xz.push(e)
      }else {
        this.now_xz.splice(this.now_xz.indexOf(e), 1)
      }
      this.user.yxz = false
    },
    bingshen(){
      for(var i of this.user){
        if(this.now_xz.indexOf(i.id)!=-1){
          i.yxz = true
        }
      }
      this.Approved_list.push(this.now_xz)
      this.now_xz=[]
    },
    chuanshen(){
      for(var i of this.now_xz){
        this.Approved_list.push(i)
      }
      this.now_xz = []
      for(var j of this.user){
        if(this.Approved_list.indexOf(j.id)!=-1){
          j.yxz = true
        }
      }
    }
  },
  mounted() {
    this.qq()
    this.getuser()
    this.get_uptoken()
    this.username=sessionStorage.getItem('username')
  }
}
</script>

<style scoped>

</style>